<template>
  <view class="container">
    <view class="user">
      <!-- #ifdef MP-WEIXIN -->
      <view class="left">
        <view
          class="nickname"
          v-if="Object.getOwnPropertyNames(business).length > 0"
          >{{ business.nickname }}</view
        >
        <!-- 微信小程序开发能力标签 获取微信昵称 -->
        <open-data v-else type="userNickName" class="nickname"></open-data>
      </view>
      <view class="right">
        <view class="avatar xcx">
          <!-- 没有登录的时候，默认用微信的开发信息 -->
          <uv-avatar
            shape="square"
            mode="scaleToFill"
            size="100%"
            :src="business.avatar_cdn"
            v-if="Object.getOwnPropertyNames(business).length > 0"
          ></uv-avatar>

          <open-data v-else type="userAvatarUrl"></open-data>
        </view>
      </view>
      <!-- #endif -->

      <!-- H5和app -->
      <!-- #ifdef APP-PLUS || H5 -->
      <view class="left">
        <view class="nickname" v-if="business.nickname">{{
          business.nickname
        }}</view>
        <view class="nickname" v-else>请先登录</view>
      </view>
      <view class="right">
        <view class="avatar">
          <uv-avatar
            :src="business.avatar_cdn"
            size="90"
            v-if="business.avatar_cdn"
          ></uv-avatar>
          <uv-avatar v-else src="/static/avatar.jpg" size="90"></uv-avatar>
        </view>
      </view>
      <!-- #endif -->
    </view>

    <!-- 菜单 对象不为空就说明有登录-->
    <view class="menu" v-if="Object.getOwnPropertyNames(business).length > 0">
      <view class="item" hover-class="checkActive" @click="ToProduct">
        <view class="title">产品防伪管理</view>
        <uv-icon name="arrow-right"></uv-icon>
      </view>

      <!--  #ifdef MP-WEIXIN -->
      <view class="item" hover-class="checkActive" @click="UnbindRef.open()">
        <view class="title">解除绑定账号</view>
        <uv-icon name="arrow-right"></uv-icon>
      </view>
      <!-- #endif -->

      <view class="item" hover-class="checkActive" @click="LogoutRef.open()">
        <view class="title">退出账号</view>
        <uv-icon name="arrow-right"></uv-icon>
      </view>
    </view>

    <!-- 登录按钮 -->
    <view
      class="actions"
      v-if="Object.getOwnPropertyNames(business).length <= 0"
    >
      <!-- #ifdef MP-WEIXIN -->
      <view class="login">
        <uv-button
          color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
          iconColor="#fff"
          iconSize="25"
          icon="weixin-circle-fill"
          @click="OnLogin"
          >微信一键登录</uv-button
        >
      </view>
      <!-- #endif -->

      <!--  #ifdef H5 || APP-PLUS-->
      <view class="login">
        <uv-button type="primary" @click="ToLogin">登录帐号</uv-button>
      </view>
      <!-- #endif -->
    </view>
  </view>

  <!-- 确认对话框 -->
  <uv-modal
    ref="LogoutRef"
    title="退出账号"
    content="是否确认退出当前账号"
    :showCancelButton="true"
    @confirm="OnLogout"
    @cancel="LogoutRef.close()"
  ></uv-modal>

  <!-- 解除绑定账号 -->
  <uv-modal
    ref="UnbindRef"
    title="解除绑定"
    content="是否确认解除账号绑定"
    :showCancelButton="true"
    @confirm="OnConfirmUnbind"
    @cancel="UnbindRef.close()"
  ></uv-modal>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
const LogoutRef = ref(null);
const UnbindRef = ref(null);
const NoticeRef = ref(null);

// 跳转到登录页
const ToLogin = () => {
  uni.$uv.route({
    type: "redirectTo",
    url: "/pages/business/login",
  });
};

// 退出登录
const OnLogout = () => {
  NoticeRef.value.show({
    type: "success",
    message: "退出当前账号成功",
    complete: () => {
      // 清空本地缓存
      uni.removeStorageSync("business");

      // business响应式数据也清空
      business.value = {};
    },
  });
};

// 确认解除微信绑定
const OnConfirmUnbind = async () => {
  // 组装参数
  const params = {
    busid: business.value.id,
  };
  // 发起请求
  const result = await uni.$uv.http.post("/business/unbind", params);
  // 处理请求结果
  if (result.code === 1) {
    NoticeRef.value.show({
      type: "success",
      message: result.msg,
      complete: () => {
        // 删除登录信息
        uni.removeStorageSync("business", result.data);

        business.value = {};
      },
    });
  } else {
    NoticeRef.value.show({
      type: "error",
      message: result.msg,
    });
  }
};

// 登录
const OnLogin = () => {
  uni.login({
    // 登录服务供应商 微信
    provider: "weixin",
    scopes: "auth_user",
    success: async function (res) {
      // 获取临时登录凭证
      let code = res.code ? res.code : "";
      if (!code) {
        NoticeRef.value.show({
          type: "error",
          message: "获取临时登录凭证失败",
        });
        return;
      }
      // 发起请求
      const result = await uni.$uv.http.post("/business/wxlogin", { code });
      // 处理请求结果
      if (result.code === 1) {
        NoticeRef.value.show({
          type: "success",
          message: result.msg,
          complete: () => {
            // 存储登录信息
            uni.setStorageSync("business", result.data);
            business.value = result.data;
          },
        });
      } else {
        // 轻提示
        NoticeRef.value.show({
          type: "error",
          message: result.msg,
          complete: () => {
            const openid = result.data ? result.data.openid : "";
            // 如果有openid，跳转到绑定页
            if (openid) {
              uni.$uv.route("/pages/business/bind", { openid });
            }
          },
        });
      }
    },
  });
};

// 跳转到产品防伪管理
const ToProduct = () => uni.$uv.route("/pages/business/list");
</script>

<style>
page {
  background-color: #eee;
}

.container {
  width: 95%;
  margin: 0 auto;
}

.user {
  display: flex;
  padding: 40px;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px;
}

/* #ifdef H5  */
.user {
  align-items: center;
}

/* #endif */

.user .left {
  flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
  flex: 3;
  display: flex;
  align-items: center;
  align-content: center;
}

/* #endif */

.user .right {
  flex: 1;
}

.user .right .xcx {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100%;
  overflow: hidden;
}

.user .left .nickname {
  font-size: 26px;
  font-weight: bold;
}

.actions {
  display: flex;
  padding: 20px 40rpx;
}

.login {
  flex: 1;
}

.menu {
  background-color: #fff;
  margin-top: 10px;
}

.menu .item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 10px 10px;
  font-size: 14px;
}

.checkActive {
  background-color: rgba(233, 233, 233, 0.5);
}
</style>